
<template>
  <div class="dndflow" @drop="onDrop">
    <Sidebar />
    <VueFlow
      fit-view-on-init
      @dragover="onDragOver"
      @nodeClick="nodeClickHandler"
    >
      <template #node-toolbar="nodeProps">
        <Toolbar
          :data="nodeProps.data"
          :label="nodeProps.label"
          :id="nodeProps.id"
          @nodeClick="nodeClick"
        />
      </template>
    </VueFlow>
    
  </div>
</template>
<script setup>
import { VueFlow, useVueFlow, Position } from "@vue-flow/core";
import { nextTick, reactive, watch } from "vue";
import Sidebar from "./components/Sidebar.vue";
import Toolbar from "./components/ToolBar.vue";
const emit = defineEmits(['nodeDataHandler']);
const defaultNodeStyle = {
  border: "1px solid #0E2846",
  background: "#0A4081",
  color: "white",
  borderRadius: "99px",
};
let id = 0;
function getId() {
  return `dndnode_${id++}`;
}

const {
  findNode,
  onConnect,
  addEdges,
  addNodes,
  project,
  vueFlowRef,
  onNodeClick,
} = useVueFlow();

/**
 * 节点相关操作
 * **/ 
function onDragOver(event) {
  event.preventDefault();

  if (event.dataTransfer) {
    event.dataTransfer.dropEffect = "move";
  }
}
function nodeClickHandler(props) {
  const node = props.node;
  console.log(node.id);
}
function nodeClick() {
  emit('nodeDataHandler')
}

onConnect((params) => addEdges(params));

function onDrop(event) {
  console.log(event, "event111");
  const type = event.dataTransfer?.getData("application/vueflow");
  console.log(type, "type111");
  const { left, top } = vueFlowRef.value.getBoundingClientRect();

  const position = project({
    x: event.clientX - left,
    y: event.clientY - top,
  });

  console.log(type, "type");
  let newtype =
    type === "input"
      ? "开始节点"
      : type === "default"
      ? "中间节点"
      : "结束节点";
  const newNode = {
    id: getId(),
    type: "toolbar",
    position,
    label: `新增节点`,
    data: { toolbarPosition: Position.Top, toolbarVisible: true },
    style: defaultNodeStyle,
  };

  addNodes([newNode]);

  // align node position after drop, so it's centered to the mouse
  nextTick(() => {
    const node = findNode(newNode.id);
    const stop = watch(
      () => node.dimensions,
      (dimensions) => {
        if (dimensions.width > 0 && dimensions.height > 0) {
          node.position = {
            x: node.position.x - node.dimensions.width / 2,
            y: node.position.y - node.dimensions.height / 2,
          };
          stop();
        }
      },
      { deep: true, flush: "post" }
    );
  });
}
</script>

<style>
@import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.22.3/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.22.3/dist/theme-default.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css";

html,
body,
#app {
  margin: 0;
  height: 100%;
}

#app {
  
  font-family: "JetBrains Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

.dndflow {
  flex-direction: column;
  display: flex;
  height: 100%;
}
.dndflow aside {
  font-weight: 700;
  border-right: 1px solid #eee;
  padding: 15px 10px;
  font-size: 12px;
  background: #fff;
  /* -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3); */
  /* box-shadow: 0 5px 10px #0000004d; */
}
.dndflow aside .nodes > * {
  margin-bottom: 10px;
  cursor: grab;
  font-weight: 500;
  /* -webkit-box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.25); */
  box-shadow: 5px 5px 10px 2px #00000040;
}
.dndflow aside .description {
  margin-bottom: 10px;
}
.dndflow .vue-flow-wrapper {
  flex-grow: 1;
  height: 100%;
}
@media screen and (min-width: 640px) {
  .dndflow {
    flex-direction: row;
  }
  .dndflow aside {
    min-width: 200px;
  }
}
@media screen and (max-width: 639px) {
  .dndflow aside .nodes {
    display: flex;
    flex-direction: row;
    gap: 5px;
  }
}
</style>
